<template>
    <el-tooltip :content="tiptxt" :disabled="!tiptxt">
        <div v-if="title" class="icon-info" @click="$emit('click')">
            <div class="icon-title flex" :class="size" :style="iconStyle" style="border-radius: 16px">
                <div class="icon-info-title" :style="textStyle">
                    <slot name="title" class="title">
                        {{ title }}
                    </slot>
                </div>
                <div class="icon-info-item">
                    <i class="iconfont" :class="icon" style="color: #3040E80D;"></i>
                </div>

            </div>
        </div>
        <div v-else-if="outsideTitle" class="icon-info outside" @click="$emit('click')" style="display: inline-flex;">
            <div class="outside-title" :style="{ fontSize: titleSize }">
                <span>{{ outsideTitle }}</span>
            </div>
            <div class="icon-info-item" :class="size" :style="iconStyle">
                <i class="iconfont" :class="icon"></i>
            </div>

        </div>

        <div v-else class="icon-info" @click="$emit('click')" :class="size">
            <div class="icon-info-item w100" :style="iconStyle">
                <i class="iconfont" :class="icon"></i>
            </div>
        </div>
    </el-tooltip>
</template>

<script setup>
import { defineProps, defineEmits, computed } from 'vue';

// 定义 props
const props = defineProps({
    icon: {
        type: String,
        default: "el-icon-more"
    },
    title: {
        type: String,
        default: ""
    },
    outsideTitle: {
        type: String,
        default: ""
    },
    outsideInp: {
        type: Boolean,
        default: false
    },
    size: {
        type: String,
        validator: (value) => ['lg', 'lg2', 'md', 'sm'].includes(value),
        default: 'lg'
    },
    titleSize: {
        type: String,
        default: "14px"
    },
    color: {
        type: String,
        validator: (value) => ['red-line', 'blue-line', 'blue', 'blue2', 'blue-line2', 'blue-text', 'black', 'orange', 'gray2', 'gray3', 'gray-line', 'white', 'gray'].includes(value),
        default: 'blue'
    },
    tiptxt: {
        type: String,
        default: null
    }
});

// 定义 emits
const emits = defineEmits(['click']);

// 计算属性
const iconStyle = computed(() => {
    let background = "";
    let border = "none";
    let color = "";

    switch (props.color) {
        case "white":
            background = "#FFFFFF";
            border = "1px solid rgba(19, 34, 65, 0.1)";
            color = "#427FFA";
            break;
        case "white1":
            background = "#FFFFFF";
            color = "#292E3D";
            break;
        case "white1":
            background = "#FFFFFF";
            color = "#292E3D";
            break;
        case "white2":
            background = "#FFFFFF";
            color = "rgba(41, 46, 61, 0.10)";
            break;
        case "black":
            background = "#132241";
            color = "#FFFFFF";
            break;
        case "blue":
            background = "#427FFA";
            color = "#FFFFFF";
            break;
        case "blue2":
            background = "rgba(66, 127, 250, 0.1)";
            color = "#427FFA";
            break;
        case "blue-line":
            background = "transparent";
            border = "1px solid rgba(66, 127, 250, 0.25)";
            color = "#427FFA";
            break;
        case "blue-line2":
            background = "rgba(0, 64, 255, 0.05)";
            border = "1px solid rgba(0, 64, 255, 0.25)";
            color = "#0040FF";
            break;
        case "blue-text":
            background = "transparent";
            border = "1px solid rgba(41,46,61,0.1)"
            color = "rgba(0, 64, 255, 1)";
            break;

        case "gray":
            background = "rgba(200, 210, 231, 0.25)";
            color = "rgba(19, 34, 65, 0.5)";
            break;
        case "gray2":
            background = "rgba(255, 255, 255, 0.5)";
            color = "rgba(19, 34, 65, 0.5)";
            break;
        case "gray3":
            background = "rgba(41,46,61,0.05)";
            color = "rgba(41, 46, 61, 1)";
            break;
        case "gray-line":
            background = "transparent";
            border = "1px solid rgba(41, 46, 61, 0.1)";
            color = "#292E3D";
            break;
        case "orange":
            background = "#FAAE42";
            color = "#FFFFFF";
            break;
        case "gray3":
            background = "rgba(41, 46, 61, 0.03)";
            color = "rgba(41, 46, 61, 1)";
            break;
        case "red-line":
            background = "rgba(255, 21, 0, 0.03)";
            color = "rgba(255, 21, 0, 1)";
            border = "1px solid rgba(255, 21, 0, 0.25)";
            break;
        case "warning":
            background = "rgba(255, 21, 0, 0.05)";
            color = "#FF1500";
            break;

    }

    return { background, border, color }
});

const textStyle = computed(() => {
    return { 'font-size': props.titleSize, 'font-weight': ['black', 'blue'].includes(props.color) ? 700 : 400 }
});
</script>

<style lang="less" scoped>
// 样式保持不变，与原组件一致
.icon-info {
    display: flex;
    align-items: center;
    cursor: pointer;

    &.outside {
        cursor: auto;

        .icon-info-item {
            cursor: pointer;
        }
    }

    .icon-info-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 100%;
        border-radius: 50%;
        background: #2422340D;

        i.iconfont {
            font-size: 16px;
            font-family: "iconfont", "element-icons" !important;
        }
    }

    .icon-title {
        width: 160px !important;
        height: 100%;
        align-items: center;
        justify-content: space-between;

        .icon-info-title {
            // min-width: 112px;
            margin: 0 20px 0 20px;
            font-size: 14px;
            text-align: end;
            white-space: nowrap;
            font-weight: bold !important;
        }

        &.lg {
            height: 48px !important;
        }

        &.lg2 {
            width: 150px !important;
            height: 48px !important;
        }

        &.md {
            width: auto !important;
            height: 40px !important;
        }

        .sm {
            width: auto !important;
            height: 32px !important;

            i {
                font-size: 12px !important;
            }
        }
    }

    .outside-title {
        font-weight: 700;
        font-size: 16px;
        margin-left: 16px;
    }
}

.el-tooltip {
    width: auto !important;
}

.lg {
    width: 48px !important;
    height: 48px !important;
}

.md {
    width: 40px !important;
    height: 40px !important;
}

.sm {
    width: 32px !important;
    height: 32px !important;

    i {
        font-size: 12px !important;
    }
}
</style>
